import Icon from './icon'

class Loading {
    static fullscreenNum = 0;//一次性初始化数量 fullscreen属性
    static closeNum = 0;//一次性关闭数量 用于 fullscreen属性                                                           
    static aloneNum = 0;//一次性独立数量
    constructor({ text, background, textColor, fullscreen }) {
        this.text = text || "加载中...";
        this.background = background || 'rgba(0, 0, 0, 0.8)';
        this.textColor = textColor || '#409eff'
        this.fullscreen = fullscreen || false
        this.init();
    }
    init() {
        let element = document.createElement('div');
        let icon = new Icon(this.textColor).getElement();
        let box = document.createElement('div');
        let text = document.createElement('div');
        Loading.aloneNum++;
        element.id = 'loading_q ' + Loading.aloneNum
        if (this.fullscreen) {
            Loading.fullscreenNum++
            element.id = 'q_loading_p';
            icon.id = 'q_loading_icon';
            box.id = 'q_loading_box';
            text.id = 'q_loading_text';
            element = document.getElementById('q_loading_p') || element
            element.innerHTML = '';//清空子元素
            icon = document.getElementById('q_loading_icon') || icon
            box = document.getElementById('q_loading_box') || box
            text = document.getElementById('q_loading_text') || text
        }

        element.className = 'loading';
        element.classList.add('fadeIN-loading');
        element.style.background = this.background;
        box.className = 'box';
        text.className = 'text';
        text.style.color = this.textColor;
        text.innerText = this.text;
        box.appendChild(icon);
        box.appendChild(text);

        element.appendChild(box);
        this.element = element;
        document.body.appendChild(element)
        this._HtmlHiddenScroll();
    }
    close() {
        this.element.classList.remove('fadeIN-loading');
        console.log(this.element)
        // 全屏 最后一个增加消失动画
        if (this.fullscreen) {
            Loading.closeNum++;
            console.log(Loading.closeNum, Loading.fullscreenNum, 'closeNum')
            if (Loading.closeNum == Loading.fullscreenNum) {
                this.element.classList.add('fadeOUT-loading');
                this.remove();
            }
        } else {
            // 单个
            this.element.classList.add('fadeOUT-loading');
            this.remove();
        }
    }

    remove() {
        setTimeout(() => {
            document.body.removeChild(this.element);
            if(!this.fullscreen) {
                Loading.aloneNum--;
            }else {
                Loading.fullscreenNum = 0;
                Loading.closeNum = 0;
            }
            this._HtmlVisibleScroll();
        }, 200);
    }

    // 显示滚动条
    _HtmlVisibleScroll() {
        let html = document.getElementsByTagName('html')[0];
        let body = document.body;
        html.style.overflow = "visible";
        body.style.overflow = "visible";
    }
    // 隐藏滚动条
    _HtmlHiddenScroll() {
        let html = document.getElementsByTagName('html')[0];
        let body = document.body;
        html.style.overflow = "hidden";
        body.style.overflow = "hidden";
    }
}

export default Loading;